<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.guid" placeholder="设备UID" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-date-picker
							v-model="filters.time"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getSessions">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="document" @click="handleDownload">导出 Excel</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="sessions" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" align="center" width="60">
			</el-table-column>
			<el-table-column prop="userName" align="center" show-overflow-tooltip label="用户" width="130">
			</el-table-column>
			<el-table-column prop="guid" align="center" show-overflow-tooltip label="设备UID" width="180" >
			</el-table-column>
			<el-table-column prop="beginTime" align="center" show-overflow-tooltip label="开始时间" width="120" :formatter="formatDate" sortable>
			</el-table-column>
			<el-table-column prop="endTime" align="center" show-overflow-tooltip label="结束时间" width="120" :formatter="formatDate"  sortable>
			</el-table-column>
			<el-table-column prop="success" align="center" show-overflow-tooltip label="连接成功" min-width="180">
			</el-table-column>
			<el-table-column prop="type" align="center" show-overflow-tooltip label="打洞类型" min-width="180">
			</el-table-column>
			<el-table-column prop="clientIp" align="center" show-overflow-tooltip label="客户端IP" min-width="180">
			</el-table-column>
			<el-table-column prop="devIp" align="center" show-overflow-tooltip label="设备IP" min-width="180">
			</el-table-column>
			<el-table-column prop="clientGuid" align="center" show-overflow-tooltip label="C端唯一标识" min-width="180">
			</el-table-column>
			<el-table-column prop="clientSessionId" align="center" show-overflow-tooltip label="会话ID" min-width="180">
			</el-table-column>
			<el-table-column prop="sessionEndTime" align="center" show-overflow-tooltip label="会话结束时间" min-width="180" :formatter="formatDate"  sortable>
			</el-table-column>
			<el-table-column fixed="right"  align="center" label="操作" width="150">
				<template scope="scope">
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
			</el-pagination>
		</el-col>
	</section>
</template>

<script>
    import util from '../../common/js/util'
    import {batchRemoveSession, exportExcelSession, getSessionListPage, removeSession} from '../../api/api';

    export default {
		data() {
			return {
				filters: {
                    guid: '',
                    time: []
				},
				sessions: [],
				total: 0,
				page: 1,
				listLoading: false,
				sels: [],//列表选中列
			}
		},
		methods: {
            formatDate: function(row, column, cellValue, index){
                if (cellValue == null)
                    return '';
                return util.formatDate.formatNum(cellValue,"yyyy-MM-dd");
            },
			handleCurrentChange(val) {
				this.page = val;
				this.getSessions();
			},
			//获取列表
			getSessions() {
                let beginTime = '';
                let endTime = '';
                if (this.filters.time.length>1){
                    beginTime = this.filters.time[0];
                    endTime = this.filters.time[1];
				}
				let para = {
					page: this.page,
					searchKey: this.filters.guid,
                    beginTime: beginTime,
					endTime:endTime
				};
				console.log(para);
				this.listLoading = true;
				getSessionListPage(para).then((data) => {
                    if (data.code == 200){
                        this.total = data.data.total;
                        this.sessions = data.data.rows;
                        this.listLoading = false;
                    }
                    this.listLoading = false;
                });
			},
            handleDownload(){
                let searchKey = this.filters.guid;
                exportExcelSession(searchKey);
            },
			//删除
			handleDel: function (index, row) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { id: row.id };
					removeSession(para).then((data) => {
                        this.listLoading = false;
                        if (data.code==200){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
						this.getSessions();
                        this.listLoading = false;
                    });
				}).catch(() => {

				});
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//批量删除
			batchRemove: function () {
				var ids = this.sels.map(item => item.id).toString();
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let para = { ids: ids };
					batchRemoveSession(para).then((data) => {
                        this.listLoading = false;
                        if (data.code==200){
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
						this.getSessions();
                        this.listLoading = false;
                    });
				}).catch(() => {

				});
			}
		},
		mounted() {
			this.getSessions();
		}
	}
</script>

<style scoped>

</style>
